﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>几何图形样式设置</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
<!--    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>-->
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #container{
            float:left;
            position:absolute;
            width:450px;
            height:500px; 
            left:50px;
            background-color:#4c4e5a;
            z-index:2000;   /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/  
            filter:alpha(opacity=50); /*支持IE */ 
            -moz-opacity:0.5; /*支持FF */ 
            opacity:0.5;  
            border-width: 10px; /*边缘的宽度*/
            border-radius: 10px;    /*圆角的大小 */ 
            border-color: #000 #000 #000 #000;  /*边框颜色*/
        }
        #layertree{
            float:left;
            position:absolute;
            width:450px;
            height:500px;       
            padding:10px;
            font-size:14px;
            font-family:"微软雅黑";
            color:#ffffff;
            left:50px;
            z-index:2001;   /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/  
        }
        #layertree ul li{
            margin:10px 15px;
            cursor: pointer;
        }
        .refreshBtn{
            float:right;  
            margin-right:10px;
        }
        .title{
            color:Red; 
        }
    </style>
</head>
<body>
    <div id="map" > 
        <div id="container"></div>
        <div id="layertree">
            <ul>
                <li><span>点要素样式</span>
                    <fieldset id="layer0">
                        <input id="refresh-points" class="refreshBtn" type="button" value="更新" /><br />
                         <!-- 图形样式设置 -->
                        <label class="title" >图形样式：</label><br />
                        <label>点大小(radius):</label>
                        <input type="text" value="10" id="points-size" /><br />
                        <label>填充颜色(color):</label>
                        <input type="text" value="#aa3300" id="points-fill-color" /><br />
                        <label>边框样式(color):</label>
                        <input type="text" value="red" id="points-stroke-color" /><br />
                        <label>边框样式(width):</label>
                        <input type="text" value="2" id="points-stroke-width" /><br />
                        <!-- 文字样式设置 -->
                        <label  class="title" >文字样式：</label><br />
                        <label>位置(align): </label>
                        <select id="points-text-align">
                          <option value="center" selected="selected">Center</option>
                          <option value="end">End</option>
                          <option value="left">Left</option>
                          <option value="right">Right</option>
                          <option value="start">Start</option>
                        </select>
                        <br />
                        <label>基线(baseline): </label>
                        <select id="points-text-baseline">
                          <option value="alphabetic">Alphabetic</option>
                          <option value="bottom">Bottom</option>
                          <option value="hanging">Hanging</option>
                          <option value="ideographic">Ideographic</option>
                          <option value="middle" selected="selected">Middle</option>
                          <option value="top">Top</option>
                        </select>
                        <br />
                        <label>旋转角度(rotation): </label>
                        <select id="points-text-rotation">
                          <option value="0">0°</option>
                          <option value="0.785398164">45°</option>
                          <option value="1.570796327">90°</option>
                        </select>
                        <br />
                        <label>字体(font): </label>
                        <select id="points-text-font">
                          <option value="Arial" selected="selected">Arial</option>
                          <option value="Courier New">Courier New</option>
                          <option value="Quattrocento Sans">Quattrocento</option>
                          <option value="Verdana">Verdana</option>
                        </select>
                        <br />
                        <label>字体粗细(weight): </label>
                        <select id="points-text-weight">
                          <option value="bold">Bold</option>
                          <option value="normal" selected="selected">Normal</option>
                        </select>
                        <br />
                        <label>字体大小(size): </label>
                        <input type="text" value="12px" id="points-text-size" />
                        <br />
                        <label>X偏移量(offset x):</label>
                        <input type="text" value="0" id="points-text-offset-x" />
                        <br />
                        <label>Y偏移量(offset y):</label>
                        <input type="text" value="0" id="points-text-offset-y" />
                        <br />
                        <label>字体颜色(color):</label>
                        <input type="text" value="blue" id="points-text-color" />
                        <br />
                        <label title="Outline Color">文字外框颜色(O. Color):</label>
                        <input type="text" value="#ffffff" id="points-text-outline-color" />
                        <br />
                        <label title="Outline Width">文字外框宽度(O. Width):</label>
                        <input type="text" value="3" id="points-text-outline-width" />
                    </fieldset>
                </li>
                <li><span>线要素样式</span>
                    <fieldset id="layer1">
                         <input id="refresh-lines" class="refreshBtn" type="button" value="更新" /><br />
                         <label class="title">图形样式：</label><br />
                         <label>线颜色(color):</label>
                         <input type="text" value="green" id="lines-stroke-color" /><br />
                         <label>线宽(width):</label>
                         <input type="text" value="2" id="lines-stroke-width" /><br />
                         <!-- 文字样式设置 -->
                         <label class="title">文字样式：</label><br />
                         <label>位置(align): </label>
                         <select id="lines-text-align">
                             <option value="center" selected="selected">Center</option>
                             <option value="end">End</option>
                             <option value="left">Left</option>
                             <option value="right">Right</option>
                             <option value="start">Start</option>
                         </select>
                         <br />
                         <label>基线(baseline): </label>
                         <select id="lines-text-baseline">
                             <option value="alphabetic">Alphabetic</option>
                             <option value="bottom">Bottom</option>
                             <option value="hanging">Hanging</option>
                             <option value="ideographic">Ideographic</option>
                             <option value="middle" selected="selected">Middle</option>
                             <option value="top">Top</option>
                         </select>
                         <br />
                         <label>旋转角度(rotation): </label>
                         <select id="lines-text-rotation">
                             <option value="0">0°</option>
                             <option value="0.785398164">45°</option>
                             <option value="1.570796327">90°</option>
                         </select>
                         <br />
                         <label>字体(font): </label>
                         <select id="lines-text-font">
                             <option value="Arial" selected="selected">Arial</option>
                             <option value="Courier New">Courier New</option>
                             <option value="Quattrocento Sans">Quattrocento</option>
                             <option value="Verdana">Verdana</option>
                         </select>
                         <br />
                         <label>字体粗细(weight): </label>
                         <select id="lines-text-weight">
                             <option value="bold">Bold</option>
                             <option value="normal" selected="selected">Normal</option>
                         </select>
                         <br />
                         <label>字体大小(size): </label>
                         <input type="text" value="12px" id="lines-text-size" />
                         <br />
                         <label>X偏移量(offset x):</label>
                         <input type="text" value="0" id="lines-text-offset-x" />
                         <br />
                         <label>Y偏移量(offset y):</label>
                         <input type="text" value="0" id="lines-text-offset-y" />
                         <br />
                         <label>字体颜色(color):</label>
                         <input type="text" value="blue" id="lines-text-color" />
                         <br />
                         <label title="Outline Color">文字外框颜色(O. Color):</label>
                         <input type="text" value="#ffffff" id="lines-text-outline-color" />
                         <br />
                         <label title="Outline Width">文字外框宽度(O. Width):</label>
                         <input type="text" value="3" id="lines-text-outline-width" />
                    </fieldset>
                </li>
                <li><span>区要素样式</span>
                    <fieldset id="layer2">
                        <input id="refresh-polygons" class="refreshBtn" type="button" value="更新" /><br />
                        <label class="title">图形样式：</label><br />
                        <label>填充颜色(color):</label>
                        <input type="text" value="rgba(255, 255, 255, 0.5)" id="polygons-fill-color" /><br />
                        <label>边框颜色(color):</label>
                        <input type="text" value="#ffcc33" id="polygons-stroke-color" /><br />
                        <label>边框宽度(width):</label>
                        <input type="text" value="2" id="polygons-stroke-width" /><br />
                        <!-- 文字样式设置 -->
                        <label class="title">文字样式：</label><br />
                        <label>位置(align): </label>
                        <select id="polygons-text-align">
                          <option value="center" selected="selected">Center</option>
                          <option value="end">End</option>
                          <option value="left">Left</option>
                          <option value="right">Right</option>
                          <option value="start">Start</option>
                        </select>
                        <br />
                        <label>基线(baseline): </label>
                        <select id="polygons-text-baseline">
                          <option value="alphabetic">Alphabetic</option>
                          <option value="bottom">Bottom</option>
                          <option value="hanging">Hanging</option>
                          <option value="ideographic">Ideographic</option>
                          <option value="middle" selected="selected">Middle</option>
                          <option value="top">Top</option>
                        </select>
                        <br />
                        <label>旋转角度(rotation): </label>
                        <select id="polygons-text-rotation">
                          <option value="0">0°</option>
                          <option value="0.785398164">45°</option>
                          <option value="1.570796327">90°</option>
                        </select>
                        <br />
                        <label>字体(font): </label>
                        <select id="polygons-text-font">
                          <option value="Arial" selected="selected">Arial</option>
                          <option value="Courier New">Courier New</option>
                          <option value="Quattrocento Sans">Quattrocento</option>
                          <option value="Verdana">Verdana</option>
                        </select>
                        <br />
                        <label>字体粗细(weight): </label>
                        <select id="polygons-text-weight">
                          <option value="bold">Bold</option>
                          <option value="normal" selected="selected">Normal</option>
                        </select>
                        <br />
                        <label>字体大小(size): </label>
                        <input type="text" value="12px" id="polygons-text-size" />
                        <br />
                        <label>X偏移量(offset x):</label>
                        <input type="text" value="0" id="polygons-text-offset-x" />
                        <br />
                        <label>Y偏移量(offset y):</label>
                        <input type="text" value="0" id="polygons-text-offset-y" />
                        <br />
                        <label>字体颜色(color):</label>
                        <input type="text" value="blue" id="polygons-text-color" />
                        <br />
                        <label title="Outline Color">文字外框颜色(O. Color):</label>
                        <input type="text" value="#ffffff" id="polygons-text-outline-color" />
                        <br />
                        <label title="Outline Width">文字外框宽度(O. Width):</label>
                        <input type="text" value="3" id="polygons-text-outline-width" />
                    </fieldset>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        //绘制的几何图形要素
        var pointFeature = new ol.Feature({
            geometry: new ol.geom.Point([0, 0]),
            name: 'Point Feature'
        });
        var lineFeature = new ol.Feature({
            geometry: new ol.geom.LineString([[1e7, 1e6], [1e6, 3e6]]),
            name: 'Line Feature'
        });
        var polygonFeature = new ol.Feature({
            geometry: new ol.geom.Polygon([[[1e6, -1e6], [1e6, 1e6], [3e6, 1e6], [3e6, -1e6], [1e6, -1e6]]]),
            name: 'Polygon Feature'
        });

        //点、线、区样式对象
        var myDom = {
            points: {
                align: document.getElementById('points-text-align'),
                baseline: document.getElementById('points-text-baseline'),
                rotation: document.getElementById('points-text-rotation'),
                font: document.getElementById('points-text-font'),
                weight: document.getElementById('points-text-weight'),
                size: document.getElementById('points-text-size'),
                offsetX: document.getElementById('points-text-offset-x'),
                offsetY: document.getElementById('points-text-offset-y'),
                color: document.getElementById('points-text-color'),
                outlineColor: document.getElementById('points-text-outline-color'),
                outlineWidth: document.getElementById('points-text-outline-width')
            },
            lines: {
                align: document.getElementById('lines-text-align'),
                baseline: document.getElementById('lines-text-baseline'),
                rotation: document.getElementById('lines-text-rotation'),
                font: document.getElementById('lines-text-font'),
                weight: document.getElementById('lines-text-weight'),
                size: document.getElementById('lines-text-size'),
                offsetX: document.getElementById('lines-text-offset-x'),
                offsetY: document.getElementById('lines-text-offset-y'),
                color: document.getElementById('lines-text-color'),
                outlineColor: document.getElementById('lines-text-outline-color'),
                outlineWidth: document.getElementById('lines-text-outline-width')
            },
            polygons: {
                align: document.getElementById('polygons-text-align'),
                baseline: document.getElementById('polygons-text-baseline'),
                rotation: document.getElementById('polygons-text-rotation'),
                font: document.getElementById('polygons-text-font'),
                weight: document.getElementById('polygons-text-weight'),
                size: document.getElementById('polygons-text-size'),
                offsetX: document.getElementById('polygons-text-offset-x'),
                offsetY: document.getElementById('polygons-text-offset-y'),
                color: document.getElementById('polygons-text-color'),
                outlineColor: document.getElementById('polygons-text-outline-color'),
                outlineWidth: document.getElementById('polygons-text-outline-width')
            }
        };
        /**
        * 创建文本样式函数
        * @param {ol.Feature} feature 要素
        * @param  dom 要素样式html对象
        */
        var createTextStyle = function (feature,dom) {
            //读取当前面板设置的样式值
            var align = dom.align.value;  //文本位置
            var baseline = dom.baseline.value; //基准线
            var size = dom.size.value;  //字体大小
            var offsetX = parseInt(dom.offsetX.value, 10); //偏移量X
            var offsetY = parseInt(dom.offsetY.value, 10); //偏移量Y
            var weight = dom.weight.value; //字体粗细
            var rotation = parseFloat(dom.rotation.value);  //角度
            var font = weight + ' ' + size + ' ' + dom.font.value; //文字样式（粗细、大小、字体）
            var fillColor = dom.color.value; //字体颜色
            var outlineColor = dom.outlineColor.value; //外框颜色
            var outlineWidth = parseInt(dom.outlineWidth.value, 10);//外框宽度

            //返回实例化的文本样式对象（ol.style.Text）
            return new ol.style.Text({
                textAlign: align, //位置
                textBaseline: baseline, //基准线
                font: font,  //文字样式
                text: feature.get('name'),  //文本内容
                fill: new ol.style.Fill({ color: fillColor }),//文本填充样式（即文字颜色）
                stroke: new ol.style.Stroke({ color: outlineColor, width: outlineWidth }),//文本外框样式（颜色与宽度）
                offsetX: offsetX, //偏移量X
                offsetY: offsetY, //偏移量Y
                rotation: rotation //角度
            });
        };
        /**
        * 创建点要素样式函数
        * @param {ol.Feature} feature 点要素
        */
        var createPointStyleFunction = function (feature) {
            var radius = document.getElementById('points-size').value;
            var fillColor = document.getElementById('points-fill-color').value;
            var strokeColor = document.getElementById('points-stroke-color').value;
            var strokeWidth = document.getElementById('points-stroke-width').value;

            return function (feature, resolution) {
                var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: radius,
                        fill: new ol.style.Fill({ color: fillColor }),
                        stroke: new ol.style.Stroke({ color: strokeColor, width: strokeWidth })
                    }),
                    text: createTextStyle(feature,myDom.points)
                });
                return [style];
            };
        };
        /**
        * 创建线要素样式函数
        * @param {ol.Feature} feature 线要素
        */
        var createLineStyleFunction = function (feature) {
            var strokeColor = document.getElementById('lines-stroke-color').value;
            var strokeWidth = document.getElementById('lines-stroke-width').value;
            return function (feature, resolution) {
                var style = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: strokeColor,
                        width: strokeWidth
                    }),
                    text: createTextStyle(feature,myDom.lines)
                });
                return [style];
            };
        };
        /**
        * 创建区要素样式函数
        * @param {ol.Feature} feature 区要素
        */
        var createPolygonStyleFunction = function (feature) {
            var fillColor = document.getElementById('polygons-fill-color').value;
            var strokeColor = document.getElementById('polygons-stroke-color').value;
            var strokeWidth = document.getElementById('polygons-stroke-width').value;

            return function (feature, resolution) {
                var style = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: strokeColor,
                        width: strokeWidth
                    }),
                    fill: new ol.style.Fill({
                        color: fillColor
                    }),
                    text: createTextStyle(feature,myDom.polygons)
                });
                return [style];
            };
        };
        
        //分别实例化点、线、区图层对象
        var vectorPoints = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [pointFeature]
            }),
            style: createPointStyleFunction(pointFeature)
        });
        var vectorLines = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [lineFeature]
            }),
            style: createLineStyleFunction(lineFeature)
        });
        var vectorPolygons = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [polygonFeature]
            }),
            style: createPolygonStyleFunction(polygonFeature)
        });

        //实例化Map对象加载地图,底图加载MapQuest地图，叠加图层为几何图形要素
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.MapQuest({ layer: 'sat' })
                }),
                vectorPoints,
                vectorLines,
                vectorPolygons
            ],
            target: 'map', //地图容器div的ID
            view: new ol.View({
                center: [0, 0], //地图初始中心点
                minZoom: 2,
                zoom: 3
            })
        });

        //设置要素样式面板
        $('#layertree li > span').click(function () {
            //切换图层样式面板的可见状态(显示与隐藏)
            $('#layertree li > span').siblings('fieldset').hide();
            $(this).next().show();
        }).siblings('fieldset').hide(); //默认隐藏各图层显示样式面板
        $("fieldset:eq(0)").show(); //显示第一个点要素样式面板

        //点、线、区的更新按钮处理函数
        $('#refresh-points').click(function () {
            vectorPoints.setStyle(createPointStyleFunction(pointFeature));
        });
        $('#refresh-lines').click(function () {
            vectorLines.setStyle(createLineStyleFunction(lineFeature));
        });
        $('#refresh-polygons').click(function () {
            vectorPolygons.setStyle(createPolygonStyleFunction(polygonFeature));
        });
    </script>
</body>
</html>
